<template>
  <div class="color-picker-container">
    <div class="color-picker-trigger" @click="showPanel = !showPanel">
      <div class="color-picker-color" :style="{ background: selectedType === 'single' ? singleActive : `linear-gradient(135deg, ${gradientActive.list[0]}, ${gradientActive.list[1]})` }">
        <span class="icon el-icon-arrow-down"></span>
      </div>
    </div>
    <!-- 弹窗 -->
    <div class="color-picker-panel single-color" v-if="showPanel">
      <el-radio-group v-model="tabActive" size="mini" class="tab">
        <el-radio-button label="single">单色</el-radio-button>
        <el-radio-button label="gradient">渐变色</el-radio-button>
      </el-radio-group>
      <!-- 单色 -->
      <div class="tab-panel" v-if="tabActive === 'single'">
        <div class="color-list">
          <div class="item" :class="{ active: singleActive === item }" @click="handleChangeSingle(item)" v-for="item in colorList" :key="item" :style="{ backgroundColor: item }"></div>
        </div>
        <div class="panel-line flex-end" style="margin-top: 8px">
          <div class="more-color">
            <div class="text">更多颜色</div>
            <el-color-picker v-model="singleActive" size="mini" @change="handleChangeSingle"> </el-color-picker>
          </div>
        </div>
      </div>
      <!-- 渐变色 -->
      <div class="tab-panel gradient" v-if="tabActive === 'gradient'">
        <div class="color-list">
          <div class="item" @click="handleChangeGradient(item)" v-for="item in gradientList" :key="item.id">
            <div class="linear-gradient" :style="{ background: `linear-gradient(135deg, ${item.list[0]}, ${item.list[1]})` }"></div>
            <div class="bottom">
              <div class="text-box">
                <div class="text">{{ item.list[0] }}</div>
                <div class="text">{{ item.list[1] }}</div>
              </div>
              <div class="check-box" v-if="gradientActive.id === item.id">
                <i class="el-icon-check"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { colorList, gradientList } from '../config'

export default {
  props: {
    domId: String,
    title: String,
  },
  components: {},
  data() {
    return {
      colorList,
      gradientList,
      selectedType: 'single',
      showPanel: false,
      tabActive: 'single',
      singleActive: '#000000',
      gradientActive: {},
    }
  },
  mounted() {},
  methods: {
    handleChangeSingle(value) {
      this.showPanel = false
      this.selectedType = 'single'
      this.singleActive = value
      this.$emit('confirm', { type: this.selectedType, value })
    },
    handleChangeGradient(value) {
      this.showPanel = false
      this.selectedType = 'gradient'
      this.gradientActive = value
      this.$emit('confirm', { type: this.selectedType, value: value.list.join(',') })
    },
    // 设置颜色
    setValue(type, value) {
      this.selectedType = type
      if (type === 'single') {
        this.singleActive = value
      } else {
        this.gradientActive = value
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.color-picker-container {
  position: relative;
}
.color-picker-trigger {
  width: 100%;
  height: 100%;
  display: inline-block;
  padding: 4px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  font-size: 0;
  position: relative;
  cursor: pointer;
}
.color-picker-color {
  position: relative;
  display: block;
  border: 1px solid #999;
  border-radius: 2px;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon {
  color: #fff;
  text-align: center;
  font-size: 12px;
}
.color-picker-panel {
  position: absolute;
  top: 28px;
  left: -115px;
  z-index: 2001;
  padding: 10px 14px;
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.tab {
  margin-bottom: 10px;
}
.color-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: 224px;
  .item {
    width: 21px;
    height: 21px;
    margin-right: 8px;
    margin-bottom: 8px;
    border: 1px solid #dcdfe6;
    border-radius: 3px;
    cursor: pointer;
    &:nth-child(8n) {
      margin-right: 0;
    }
    &.active {
      outline: 1px solid #409eff;
    }
  }
}
.gradient .color-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: 432px;
  .item {
    width: 80px;
    height: 105px;
    margin-right: 8px;
    margin-bottom: 8px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    cursor: pointer;
    &:nth-child(5n) {
      margin-right: 0;
    }
    .linear-gradient {
      width: 100%;
      height: 70px;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px;
    }
    .text {
      font-size: 9px;
      line-height: 1.3;
      color: #999999;
    }
    .check-box {
      width: 16px;
      height: 16px;
      background: #409eff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      color: #ffffff;
    }
  }
}

.more-color {
  display: flex;
  align-items: center;
  .text {
    font-size: 12px;
    margin-right: 10px;
  }
}
</style>
